import router from './router'
import store from './store'

// 引入进度条nprogress
import NProgress from 'nprogress'
// 引入进度条nprogress的样式
import 'nprogress/nprogress.css'

// 导入所有的动态路由
import { asyncRoutes } from '@/router'

const whiteList = ['/login', '/404']
// 所有的页面在跳转之前一定会经过这里
router.beforeEach(async(to, from, next) => {
  // 开启进度条
  NProgress.start()
  // 判断是否有token --vuex
  if (store.getters.token) {
    // 登录
    // 判断是否去登录页
    if (to.path === '/login') {
      console.log('已经登录，不能再去登录页')
      next('/')
      // 如果next(指定的地址) 跳转页面，那么不会再执行  router.afterEach
      NProgress.done()
    } else {
      console.log('已经登录，放行')
      //  获取用户信息，存储到vuex
      // 判断vuex中是否已经存储了用户的信息
      if (!store.getters.userId) {
        // 根据权限信息 动态的添加路由
        // 1. 获取用户的权限信息
        // 2. 根据权限筛选动态路由
        // 3. 动态添加路由
        const { roles } = await store.dispatch('user/getInfo')
        console.log(asyncRoutes, 'asyncRoutes')
        const filterList = asyncRoutes.filter(item => {
          return roles.menus.includes(item.children[0].name)
        })

        // 把筛选好的路由列表，尾部追加404的路由  再使用router.addRoutes动态添加
        filterList.push({ path: '*', redirect: '/404', hidden: true })
        // 一旦使用了 addRoutes ,那么需要使用next(to.path)再次进入到原来的页面,
        // 能保证动态的路由渲染好再进入页面
        // 把动态路由添加到vuex存储，渲染左侧菜单
        store.commit('user/setRoutes', filterList)
        //  动态添加路由
        router.addRoutes(filterList)
        console.log(filterList, 'filterList')
        console.log(roles, 'roles')
        next(to.path)
      } else {
        next() // 放行了 才会执行 router.afterEach
      }
    }
  } else {
    // 没有登录 '/login || /404'
    if (whiteList.includes(to.path)) {
      console.log('在白名单,放行')
      next()
    } else {
      console.log('不在白名单，去登录页')
      next('/login')
      NProgress.done()
    }
  }
})

// 所有的页面在跳转之后一定会经过这里

router.afterEach(() => {
  // 关闭进度条
  NProgress.done() // 关闭进度条
})

